<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../three.min.js"></script>
    <script src="../Stats.js" data-ke-src="../Stats.js"></script>
</head>
<body>
    <script>
        const width = window.innerWidth;
        const height = window.innerHeight;
        var renderer;
        var camera;
        var scene;
        var stats;
        function init() {
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(width,height)
            document.body.appendChild(renderer.domElement)

            camera = new THREE.PerspectiveCamera(45,width/height,0.1,2000)
            camera.position.set(0,0,1800)
            camera.up.set(0,1,0)
            //camera.lookAt(new THREE.Vector3(0,0,0))

            scene = new THREE.Scene()

            var light = new THREE.AmbientLight(0xffffff)
            scene.add(light)

            /*state */
            stats = new Stats()
            stats.domElement.style.position = 'absolute'
            stats.domElement.style.top = '0px'
            stats.domElement.style.left = '0px'
            document.body.appendChild(stats.domElement)

            window.addEventListener( 'resize', onWindowResize, false );
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        function CreateGeometry() {
            var angleNum = 1600000
            var position = new Float32Array(angleNum*3*3)
            var color = new Float32Array(angleNum*3*3)
            var normailze = new Float32Array(angleNum*3*3)
            var n = 800,halfN = 400;
            var angleN = 12,halfAngleN = 6;
            /* 用于法线计算 */
            var verticA = new THREE.Vector3()
            var verticB = new THREE.Vector3()
            var verticC = new THREE.Vector3()

            var subAB = new THREE.Vector3()
            var subAC = new THREE.Vector3()
            var croC = new THREE.Vector3()
            for(let i = 0; i < position.length; i+=9) {
                //console.log(i)
                /* 确定一个三角形的中心坐标 */
                var x = Math.random() * n - halfN
                var y = Math.random() * n - halfN
                var z = Math.random() * n - halfN
                /* 确定三角形三个顶点的坐标 */
                var ax = x + Math.random() * angleN - halfAngleN
                var ay = y + Math.random() * angleN - halfAngleN
                var az = z + Math.random() * angleN - halfAngleN
                position[i] = ax
                position[i+1] = ay
                position[i+2] = az

                var bx = x + Math.random() * angleN - halfAngleN
                var by = y + Math.random() * angleN - halfAngleN
                var bz = z + Math.random() * angleN - halfAngleN
                position[i+3] = bx
                position[i+4] = by
                position[i+5] = bz

                var cx = x + Math.random() * angleN - halfAngleN
                var cy = y + Math.random() * angleN - halfAngleN
                var cz = z + Math.random() * angleN - halfAngleN
                position[i+6] = cx
                position[i+7] = cy
                position[i+8] = cz

                /* 确定三角形的法线坐标 */
                verticA.set(ax,ay,az)
                verticB.set(bx,by,bz)
                verticC.set(cx,cy,cz)
                subAB.subVectors(verticA,verticB)
                subAC.subVectors(verticA,verticC)   
                croC.crossVectors(subAB,subAC)
                croC.normalize()

                var nx = croC.x
                var ny = croC.y
                var nz = croC.z

                normailze[i] = nx
                normailze[i+1] = ny
                normailze[i+2] = nz
                normailze[i+3] = nx
                normailze[i+4] = ny
                normailze[i+5] = nz
                normailze[i+6] = nx
                normailze[i+7] = ny
                normailze[i+8] = nz
                /* 确定三角形各顶点的color*/
                var r = (x/n) + 0.5
                var g = (y/n) + 0.5
                var b = (z/n) + 0.5

                color[i] = r
                color[i+1] = g
                color[i+2] = b
                color[i+3] = r
                color[i+4] = g
                color[i+5] = b
                color[i+6] = r
                color[i+7] = g
                color[i+8] = b
            } 
            var geometry = new THREE.BufferGeometry()
            geometry.setAttribute("position",new THREE.BufferAttribute(position,3))
            geometry.setAttribute("color",new THREE.BufferAttribute(color,3))
            geometry.setAttribute("normal",new THREE.BufferAttribute(normailze,3))
            return geometry
        }
        function animate() {
            requestAnimationFrame(animate)
            stats.begin()
            mesh.rotation.x = mesh.rotation.y + 0.01
            mesh.rotation.y = mesh.rotation.y + 0.01
            renderer.render(scene,camera)
            stats.end()
        }
        init()
        var geometry = CreateGeometry()
        console.log(geometry)
        //console.log(geometry.computeBoundingBox())
        //console.log(new THREE.BoxGeometry(50,50,50).computeBoundingBox())
        var material = 	new THREE.MeshBasicMaterial({ 
			vertexColors: THREE.VertexColors,
			side: THREE.DoubleSide 
		})
        var mesh = new THREE.Mesh(geometry,material)
        scene.add(mesh)
        animate()
    </script>
</body>
</html>